<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1. 全局组件注册的时机：
      1. Vue2 在 new Vue() 之前
        Vue2 中全局注册的注册是： Vue.component()
      2. Vue3 在 app.mount() 之前
        Vue3 中全局注册的注册是： app.component()
    2. 组件的名字需要是非现有的html元素的名字，或已经注册过的组件名字
    3. 在注册组件时组件的名字可以是 短横线写法 或者 驼峰写法。但是在使用的时候需要转换成 短横线写法。这是 html 的限制
        在如下的三个位置编写时，没有这条规则的限制：
          1. template 字符串
          2. 在 <script type="text/x-template"> 中时
          3. 在 后缀为 .vue 的单文件组件中

   -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script type="text/x-template" id="appTmp">
      <div>
        <button @click="visible = !visible">toggle</button>
        <hr />
        <hello v-if="visible"></hello>
        <hr />
        <MyHeader></MyHeader>
      </div>
    </script>
    <script>
      const app = Vue.createApp({
        // template: `
        //   <div>
        //     <button @click="visible = !visible">toggle</button>
        //     <hr />
        //     <hello v-if="visible"></hello>
        //     <hr />
        //     <MyHeader></MyHeader>
        //   </div>
        // `,
        template: "#appTmp",
        data() {
          return {
            visible: true,
          };
        },
      });

      app.component("hello", {
        template: `
        <div class="hello">Hello - {{ count }}</div>
      `,
        data() {
          return {
            count: 60,
          };
        },
      });

      app.component("MyHeader", {
        template: `
          <div>header</div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
